<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>市场综揽</title>
    <style> 
        /* 通用样式 */
        body {  
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;  
            background-color: #121212;  
            color: #BEC4CD;  
            margin: 20px auto;  
            width: 900px;
            font-size: 12px;
        }
        /*  */
        .container {  
            display: flex;  
            flex-wrap: wrap;  
            gap: 2px;  
        }
        /* 列样式 */
        .column {  
            display: flex;  
            flex-direction: column;  
            gap: 2px;  
            flex: 1;  
            min-width: 100px;  
        }  
        /* 列内容样式 */
        .column:first-child {  
            flex: 0.85;  
        }
        /* 列标题样式 */
        .column:nth-child(2),  
        .column:nth-child(3) {  
            text-align: center;  
        }
        /* 数据项样式 */
        .data-section {  
            background-color: #1e1e1e;  
            border: 1px solid #333;  
            border-radius: 5px;  
            padding: 5px;  
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);  
            font-size: 12px;  
        }
        /* 列标题样式 */
        .section-title {  
            font-size: 14px;  
            margin-bottom: 5px;  
            font-weight: bold;  
            text-align: center;  
            color: #ffcc00;  
        }
        /* 数据项内容样式 */
        .data-item {  
            margin-bottom: 5px;  
            border-bottom: 1px solid #333;  
            padding-bottom: 2px;  
            transition: background-color 0.3s;  
            cursor: pointer;  
        }  
        .data-item:last-child {  
            border-bottom: none;  
        }  
        .data-item:hover {  
            background-color: #333;  
        }
        /* 正涨幅样式 */
        .positive {  
            color: #ff4c4c;  
        }  
        /* 负涨幅样式 */
        .negative {  
            color: #4caf50;  
        }
        /* 高亮样式 */
        .highlight {  
            color: #ffcc00;  
        }
        .flex-row {  
            display: flex;  
            justify-content: space-between;  
        }
        .half-width {  
            width: 48%;  
        }  
        
        /* 涨跌幅分布图样式 */
        .chart-container {
            margin-top: 20px;
            width: 100%;
        }
        
        /* 涨跌幅分布图标题样式 */
        .chart-title {
            text-align: center;
            font-size: 14px;
            color: #ffcc00;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        /* 涨跌幅分布图样式 */
        .chart {
            display: flex;
            align-items: flex-end;
            height: 80px; /* 保持80px高度 */
            padding: 5px 5px; /* 减少左右padding，增加图表区域宽度 */
            border: 1px solid #333;
            background-color: #1e1e1e;
            border-radius: 5px;
            width: 100%;
        }
        
        /* 涨跌幅分布图柱子样式 */
        .bar-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 0 6px; /* 不放大，不缩小，基础宽度6px */
            margin: 0 0.5px; /* 设置左右间隙，使柱子间总间隙为0.5px */
        }
        
        /* 涨幅为正样式 */
        .bar {
            width: 5px; /* 固定宽度6px */
            background-color: #f44336; /* 正数红色 */
            min-height: 1px;
        }
        
        /* 涨幅为负样式 */
        .bar.negative {
            background-color: #4caf50; /* 负数绿色 */
        }
        
        /* 涨跌幅分布图柱子标签样式 */
        .bar-label {
            margin-top: 3px;
            font-size: 0.7em;
            text-align: center;
        }
        
        /* 涨跌幅分布图柱子数值样式 */
        .bar-value {
            font-size: 0.6em;
            text-align: center;
            margin-bottom: 2px;
            display: none;
        }
    </style>  
</head>  
<body>  
<div class="data-section" style="margin-bottom: 20px;">  
    <div class="section-title">市场综览</div>  
    <div id="data-container" class="container"></div>  
</div>  

<script>  
(function() {
    /* 防止频繁请求的锁 */
    const fetchLock = {  
        _locked: false,  
        _lastFetch: 0,  
        
        lock() {  
            this._locked = true;  
            this._lastFetch = Date.now();  
        },  
        
        unlock() {  
            this._locked = false;  
        },  
        
        canFetch() {  
            return !this._locked && (Date.now() - this._lastFetch > 2000);  
        }  
    };  

    /* 获取数据 */
    async function fetchData() {  
        if (!fetchLock.canFetch()) {  
            return;  
        }  
        
        fetchLock.lock();  
        try {  
            const response1 = await fetch('https://apphq.longhuvip.com//w1/api/index.php?PhoneOSNew=2&Token=0&UserID=0&VerSion=5.12.0.1&View=1%2C2%2C3%2C4%2C5%2C6&a=GlobalCommon&apiv=w34&c=GlobalIndex');  
            // 注释掉已损坏的接口
            // const response2 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?PhoneOSNew=2&Token=0&UserID=0&VerSion=5.12.0.1&a=ZhangTingExpression&apiv=w30&c=HomeDingPan');  
            const response3 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?a=ZhangFuDetail&apiv=w21&c=HomeDingPan');  
            const response4 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=2&st=25&a=AllXianHuo&c=XianHuoData&apiv=w25&Type=2&IsJX=1');  
            
            // 添加涨停数据接口请求
            const response5_1 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=0&a=DailyLimitPerformance&st=100&apiv=w21&Type=4&c=HomeDingPan&PidType=1'); // 一板
            const response5_2 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=0&a=DailyLimitPerformance&st=100&apiv=w21&Type=4&c=HomeDingPan&PidType=2'); // 二板
            const response5_3 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=0&a=DailyLimitPerformance&st=100&apiv=w21&Type=4&c=HomeDingPan&PidType=3'); // 三板
            const response5_4 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=0&a=DailyLimitPerformance&st=100&apiv=w21&Type=4&c=HomeDingPan&PidType=4'); // 四板
            const response5_5 = await fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=0&a=DailyLimitPerformance&st=100&apiv=w21&Type=4&c=HomeDingPan&PidType=5'); // 五板及以上

            // 修改检查条件，不再检查response2，添加新的检查
            if (!response1.ok || !response3.ok || !response4.ok || 
                !response5_1.ok || !response5_2.ok || !response5_3.ok || !response5_4.ok || !response5_5.ok) {  
                throw new Error('Failed to fetch data');  
            }  

            const data1 = await response1.json();  
            // 将data2设置为空对象，以空处理已损坏的接口
            const data2 = {};  
            const data3 = await response3.json();  
            const data4 = await response4.json();  
            // 添加涨停数据
            const data5_1 = await response5_1.json();
            const data5_2 = await response5_2.json();
            const data5_3 = await response5_3.json();
            const data5_4 = await response5_4.json();
            const data5_5 = await response5_5.json();
            
            // 保存数据用于重新绘制图表
            lastFetchedData = { data1, data2, data3, data4, data5_1, data5_2, data5_3, data5_4, data5_5 };
            
            displayData(data1, data2, data3, data4, data5_1, data5_2, data5_3, data5_4, data5_5);  
        } catch (error) {  
            console.error('Error fetching data:', error);  
            // 即使出现错误也尝试显示已获取的数据
            // 这里可以添加错误提示或使用缓存数据
        } finally {  
            setTimeout(() => fetchLock.unlock(), 2000);  
        }  
    }  

    /* 显示数据 */
    function displayData(data1, data2, data3, data4, data5_1, data5_2, data5_3, data5_4, data5_5) {  
        const container = document.getElementById('data-container');  

        const sections = [  
            {  
                title: '外围指数',  
                data: data1.CYWWZS,  
                items: [  
                    { code: 'DJI', name: '道琼斯' },  
                    { code: 'IXIC', name: '纳斯达克' },  
                    { code: 'SPX', name: '标普500' },  
                    { code: 'HSI', name: '恒生指数' },  
                    { code: 'N225', name: '日经225' },  
                    { code: 'FTSE', name: '英国富时' }  
                ]  
            },  
            {  
                title: '二、汇率指数',  
                data: data1.HLZS,  
                items: [  
                    { code: 'USDIND', name: '美元指数' },  
                    { code: 'USDCNH', name: '美元离岸人民币' },  
                    { code: 'EURUSD', name: '欧元兑美元' }  
                ]  
            },  
            {  
                title: '三、热门股指',  
                data: data1.RMGZ,  
                items: [  
                    { code: '@YM0Y', name: '迷你道琼斯连续' },  
                    { code: 'CN0Y', name: 'A50期指当月连续' },  
                    { code: 'NK0W', name: '日经225期指主连' }  
                ]  
            },  
            {  
                title: '四、全球商品',  
                data: data1.QQSP,  
                items: [  
                    { code: '@GC0W', name: '纽约金主连' },  
                    { code: '@HG0W', name: '纽约铜主连' },  
                    { code: '@SI0W', name: '纽约银主连' },  
                    { code: '@NG0Y', name: '天然气连续' },  
                    { code: 'BRN0Y', name: '布伦特原油当月连续' },  
                    { code: 'WBS0Y', name: 'NYMEX原油' },  
                    { code: '03AHD', name: '综合铝03' },  
                    { code: '03NID', name: '综合镍03' },  
                    { code: '03PBD', name: '综合铅03' },  
                    { code: '03SND', name: '综合锡03' },  
                    { code: '03ZSD', name: '综合锌03' }  
                ]  
            }  
        ];  

        container.innerHTML = '';  

        const column1 = document.createElement('div');  
        column1.className = 'column';  
        const column2 = document.createElement('div');  
        column2.className = 'column';  
        const column3 = document.createElement('div');  
        column3.className = 'column';  

        const newSectionDiv1 = createThirdApiDataSection(data3);  
        // 修改为传递涨停数据
        const newSectionDiv2 = createNewDataSection(data5_1, data5_2, data5_3, data5_4, data5_5);  
        column1.appendChild(newSectionDiv1);  
        column1.appendChild(newSectionDiv2);  

        const combinedSectionDiv = createCombinedSectionDiv(sections[0], sections[1], sections[2]);  
        column2.appendChild(combinedSectionDiv);  

        const splitCommoditiesSectionDiv = createSplitCommoditiesSectionDiv(sections[3], data4);  
        column3.appendChild(splitCommoditiesSectionDiv);  

        container.appendChild(column1);  
        container.appendChild(column2);  
        container.appendChild(column3);  
    }  

    /* 创建单独数据块 */
    function createSectionDiv(section) {  
        const sectionDiv = document.createElement('div');  
        sectionDiv.className = 'data-section';  

        const title = document.createElement('div');  
        title.className = 'section-title';  
        title.textContent = section.title;  
        sectionDiv.appendChild(title);  

        section.items.forEach(item => {  
            const dataItem = section.data.find(d => d.code === item.code);  
            if (dataItem) {  
                const itemDiv = document.createElement('div');  
                itemDiv.className = 'data-item';  
                const rate = parseFloat(dataItem.increase_rate).toFixed(2);  
                const lastPx = parseFloat(dataItem.last_px).toFixed(2);  
                const increaseAmount = parseFloat(dataItem.increase_amount).toFixed(2);  
                const colorClass = rate < 0 ? 'negative' : 'positive';  
                itemDiv.innerHTML = `  
                    <strong>${item.name}</strong><br>  
                    <span class="${colorClass}">${lastPx}</span><br>  
                    <span class="${colorClass}">${increaseAmount} | ${rate}%</span>  
                `;  
                sectionDiv.appendChild(itemDiv);  
            }  
        });  

        return sectionDiv;  
    }  

    /* 合并股指和汇率为两栏显示 */
    function createCombinedSectionDiv(section1, section2, section3) {  
        const sectionDiv = document.createElement('div');  
        sectionDiv.className = 'data-section flex-row';  

        const leftDiv = document.createElement('div');  
        leftDiv.className = 'half-width';  
        const rightDiv = document.createElement('div');  
        rightDiv.className = 'half-width';  

        const title1 = document.createElement('div');  
        title1.className = 'section-title';  
        title1.textContent = section1.title;  
        leftDiv.appendChild(title1);  

        section1.items.forEach(item => {  
            const dataItem = section1.data.find(d => d.code === item.code);  
            if (dataItem) {  
                const itemDiv = document.createElement('div');  
                itemDiv.className = 'data-item';  
                const rate = parseFloat(dataItem.increase_rate).toFixed(2);  
                const lastPx = parseFloat(dataItem.last_px).toFixed(2);  
                const increaseAmount = parseFloat(dataItem.increase_amount).toFixed(2);  
                const colorClass = rate < 0 ? 'negative' : 'positive';  
                itemDiv.innerHTML = `  
                    <strong>${item.name}</strong><br>  
                    <span class="${colorClass}">${lastPx}</span><br>  
                    <span class="${colorClass}">${increaseAmount} | ${rate}%</span>  
                `;  
                leftDiv.appendChild(itemDiv);  
            }  
        });  

        const title2 = document.createElement('div');  
        title2.className = 'section-title';  
        title2.textContent = '股指|汇率';  
        rightDiv.appendChild(title2);  

        [section2, section3].forEach(section => {  
            section.items.forEach(item => {  
                const dataItem = section.data.find(d => d.code === item.code);  
                if (dataItem) {  
                    const itemDiv = document.createElement('div');  
                    itemDiv.className = 'data-item';  
                    const rate = parseFloat(dataItem.increase_rate).toFixed(2);  
                    const lastPx = parseFloat(dataItem.last_px).toFixed(2);  
                    const increaseAmount = parseFloat(dataItem.increase_amount).toFixed(2);  
                    const colorClass = rate < 0 ? 'negative' : 'positive';  
                    itemDiv.innerHTML = `  
                        <strong>${item.name}</strong><br>  
                        <span class="${colorClass}">${lastPx}</span><br>  
                        <span class="${colorClass}">${increaseAmount} | ${rate}%</span>  
                    `;  
                    rightDiv.appendChild(itemDiv);  
                }  
            });  
        });  

        sectionDiv.appendChild(leftDiv);  
        sectionDiv.appendChild(rightDiv);  

        return sectionDiv;  
    }  

    /* 分割为两栏显示 */
    function createSplitCommoditiesSectionDiv(section, additionalData) {  
        const sectionDiv = document.createElement('div');  
        sectionDiv.className = 'data-section flex-row';  

        const leftDiv = document.createElement('div');  
        leftDiv.className = 'half-width';  
        const rightDiv = document.createElement('div');  
        rightDiv.className = 'half-width';  

        const leftItems = ['@GC0W', '@HG0W', '@SI0W', '@NG0Y', 'BRN0Y', 'WBS0Y'];  
        const rightItems = section.items.filter(item => !leftItems.includes(item.code)).map(item => item.code);  

        const title1 = document.createElement('div');  
        title1.className = 'section-title';  
        title1.textContent = '主要商品';  
        leftDiv.appendChild(title1);  

        const title2 = document.createElement('div');  
        title2.className = 'section-title';  
        title2.textContent = '其他商品';  
        rightDiv.appendChild(title2);  

        section.items.forEach(item => {  
            const dataItem = section.data.find(d => d.code === item.code);  
            if (dataItem) {  
                const itemDiv = document.createElement('div');  
                itemDiv.className = 'data-item';  
                const rate = parseFloat(dataItem.increase_rate).toFixed(2);  
                const lastPx = parseFloat(dataItem.last_px).toFixed(2);  
                const increaseAmount = parseFloat(dataItem.increase_amount).toFixed(2);  
                const colorClass = rate < 0 ? 'negative' : 'positive';  
                itemDiv.innerHTML = `  
                    <strong>${item.name}</strong><br>  
                    <span class="${colorClass}">${lastPx}</span><br>  
                    <span class="${colorClass}">${increaseAmount} | ${rate}%</span>  
                `;  
                if (leftItems.includes(item.code)) {  
                    leftDiv.appendChild(itemDiv);  
                } else {  
                    rightDiv.appendChild(itemDiv);  
                }  
            }  
        });  

        const bdiData = additionalData.List.find(item => item[1] === '波罗的海(BDI)指数');  
        if (bdiData) {  
            const bdiDiv = document.createElement('div');  
            bdiDiv.className = 'data-item';  
            bdiDiv.innerHTML = `  
                <strong>波罗的海(BDI)指数</strong><br>  
                <span class="positive">${bdiData[0]}</span><br>  
                <span class="positive">${bdiData[4]} | ${bdiData[3]}%</span>  
            `;  
            rightDiv.appendChild(bdiDiv);  
        }  

        sectionDiv.appendChild(leftDiv);  
        sectionDiv.appendChild(rightDiv);  

        return sectionDiv;  
    }  

    /* 创建新数据块 */
    function createNewDataSection(data5_1, data5_2, data5_3, data5_4, data5_5) {  
        const sectionDiv = document.createElement('div');  
        sectionDiv.className = 'data-section';  

        const title = document.createElement('div');  
        title.className = 'section-title';  
        title.textContent = '涨停数据';  
        sectionDiv.appendChild(title);  

        // 检查数据是否存在
        if (!data5_1 || !data5_2 || !data5_3 || !data5_4 || !data5_5) {
            const noDataDiv = document.createElement('div');  
            noDataDiv.className = 'data-item';  
            noDataDiv.innerHTML = '<strong>数据加载中...</strong>';  
            sectionDiv.appendChild(noDataDiv);
            return sectionDiv;
        }

        // 计算各板数量
        const count1 = data5_1.info && data5_1.info.length > 0 ? data5_1.info[0].length : 0;
        const count2 = data5_2.info && data5_2.info.length > 0 ? data5_2.info[0].length : 0;
        const count3 = data5_3.info && data5_3.info.length > 0 ? data5_3.info[0].length : 0;
        const count4 = data5_4.info && data5_4.info.length > 0 ? data5_4.info[0].length : 0;
        const count5 = data5_5.info && data5_5.info.length > 0 ? data5_5.info[0].length : 0;

        // 按指定顺序显示数据
        const rowData = [
            [`五板及以上 <span class="highlight">${count5}家</span>`], // 第1行：五板及以上
            [`四板 <span class="highlight">${count4}家</span>`, `三板 <span class="highlight">${count3}家</span>`], // 第2行：四板、三板
            [`二板 <span class="highlight">${count2}家</span>`, `首板 <span class="highlight">${count1}家</span>`] // 第3行：二板、首板
        ];

        // 创建行容器
        rowData.forEach((rowItems, rowIndex) => {
            const rowDiv = document.createElement('div');
            rowDiv.style.display = 'flex';
            rowDiv.style.gap = '10px'; // 行内项目之间的间隙
            rowDiv.style.marginBottom = rowIndex < rowData.length - 1 ? '5px' : '0'; // 行之间的间隙
            
            rowItems.forEach(text => {
                const itemDiv = document.createElement('div');  
                itemDiv.className = 'data-item';  
                itemDiv.innerHTML = `<strong>${text}</strong>`;  
                itemDiv.style.flex = '1'; // 平均分配宽度
                rowDiv.appendChild(itemDiv);
            });
            
            sectionDiv.appendChild(rowDiv);
        });

        return sectionDiv;  
    }  
    
    /* 创建第三方数据块 */
    function createThirdApiDataSection(data) {  
        const sectionDiv = document.createElement('div');  
        sectionDiv.className = 'data-section';  

        const title = document.createElement('div');  
        title.className = 'section-title';  
        title.textContent = '市场动态';  
        sectionDiv.appendChild(title);  

        // 检查数据是否存在
        if (!data || !data.info) {
            // 添加提示信息，表明数据不可用
            const itemDiv = document.createElement('div');  
            itemDiv.className = 'data-item';  
            itemDiv.innerHTML = '<strong>暂无数据</strong>';  
            sectionDiv.appendChild(itemDiv);
            return sectionDiv;
        }

        const info = data.info;  
        
        // 从新的JSON结构中提取数据，添加默认值防止出错
        const sjzt = info.SJZT !== undefined ? info.SJZT : '0';
        const sjdt = info.SJDT !== undefined ? info.SJDT : '0';
        const szjs = info.SZJS !== undefined ? info.SZJS : '0';
        const xdjs = info.XDJS !== undefined ? info.XDJS : '0';
        const qscln = info.qscln !== undefined ? info.qscln : 0;
        const q_zrcs = info.q_zrcs !== undefined ? info.q_zrcs : 0;
        
        const volume = (qscln / 10000).toFixed(2);
        const changeFromYesterday = ((qscln - q_zrcs) / 10000).toFixed(2);
        const changeColorClass = (qscln - q_zrcs) < 0 ? 'negative' : 'positive';
        
        const formattedData = [  
            `实际涨停: <span class="positive">${sjzt}家</span> 实际跌停: <span class="negative">${sjdt}家</span>`,  
            `上涨家数: <span class="positive">${szjs}家</span> 下跌家数: <span class="negative">${xdjs}家</span>`,  
            `量能: <span class="highlight">${volume}亿</span> 较昨日: <span class="${changeColorClass}">${changeFromYesterday}亿</span>`  
        ];  

        formattedData.forEach(text => {  
            const itemDiv = document.createElement('div');  
            itemDiv.className = 'data-item';  
            itemDiv.innerHTML = `<strong>${text}</strong>`;  
            sectionDiv.appendChild(itemDiv);  
        });  
        
        // 添加涨跌幅分布图标题
        const chartTitle = document.createElement('div');
        chartTitle.className = 'chart-title';
        chartTitle.textContent = '涨跌幅分布';
        sectionDiv.appendChild(chartTitle);
        
        // 添加涨跌幅分布图容器
        const chartDiv = document.createElement('div');
        chartDiv.className = 'chart';
        chartDiv.id = 'distribution-chart-' + Date.now(); // 添加唯一ID防止冲突
        sectionDiv.appendChild(chartDiv);
        
        // 生成涨跌幅分布图
        generateDistributionChart(info, chartDiv);

        return sectionDiv;  
    }  
    
    // 存储最后一次获取的数据，用于重新绘制图表
    let lastFetchedData = null;
    
    // 生成涨跌幅分布图
    function generateDistributionChart(info, chartContainer) {
        // 清空图表容器
        chartContainer.innerHTML = '';
        
        // 提取涨跌幅分布数据
        const distributionData = {};
        for (const key in info) {
            // 只处理数值键（涨跌幅范围）
            if (key.match(/^[-]?\d+$/)) {
                distributionData[key] = parseInt(info[key]);
            }
        }
        
        // 获取所有键并按降序排序（让正数在左边，负数在右边）
        const keys = Object.keys(distributionData).map(Number).sort((a, b) => b - a);
        const maxValue = Math.max(...Object.values(distributionData));
        
        // 如果没有数据，直接返回
        if (keys.length === 0) {
            const noDataDiv = document.createElement('div');
            noDataDiv.textContent = '暂无分布数据';
            noDataDiv.style.textAlign = 'center';
            noDataDiv.style.width = '100%';
            noDataDiv.style.color = '#BEC4CD';
            chartContainer.appendChild(noDataDiv);
            return;
        }
        
        keys.forEach(key => {
            const value = distributionData[key];
            // 确保最小高度为1像素，以便始终可见
            const barHeight = maxValue > 0 ? Math.max(1, (value / maxValue) * 70) : 1;
            
            const barContainer = document.createElement('div');
            barContainer.className = 'bar-container';
            
            // 设置柱子容器的flex属性以实现等比例缩放
            barContainer.style.flex = '1';
            
            const barValue = document.createElement('div');
            barValue.className = 'bar-value';
            barValue.textContent = value;
            
            const bar = document.createElement('div');
            bar.className = 'bar';
            bar.style.height = barHeight + 'px';
            
            // 负数为绿色，正数为红色（通过CSS类控制）
            if (key < 0) {
                bar.classList.add('negative'); // 负数用绿色
            }
            
            const barLabel = document.createElement('div');
            barLabel.className = 'bar-label';
            barLabel.textContent = key;
            
            barContainer.appendChild(barValue);
            barContainer.appendChild(bar);
            barContainer.appendChild(barLabel);
            
            chartContainer.appendChild(barContainer);
        });
    }
    
    // 重新生成所有图表
    function redrawCharts() {
        if (lastFetchedData && lastFetchedData.data3 && lastFetchedData.data3.info) {
            // 重新生成涨跌幅分布图
            const charts = document.querySelectorAll('.chart');
            charts.forEach(chart => {
                generateDistributionChart(lastFetchedData.data3.info, chart);
            });
        }
    }
    
    // 监听窗口大小变化事件
    window.addEventListener('resize', function() {
        // 使用防抖动技术，避免频繁重绘
        clearTimeout(window.resizeTimer);
        window.resizeTimer = setTimeout(function() {
            redrawCharts();
        }, 300);
    });
    
    fetchData();  

    // 添加每30秒自动刷新数据的定时器
    setInterval(fetchData, 30000);
})();
</script>  

</body>  
</html>
